<template>
  <home v-for="data in list" style="width: 560px;height: 400px;" :myName="data" msg="Welcome to Your Vue.js App"/>
</template>

<script>
import home from './views/Home.vue'

export default {
  name: 'App',
  components: {
    home
  },
  data(){
    return {
			list: [
        {
          id: 'test1',
          url: require('../public/4.mp4')
        },
        {
          id: 'test2',
          url: require('../public/5.mp4')
        },
        {
          id: 'test3',
          url: ''
        },
        {
          id: 'test4',
          url: ''
        },
        {
          id: 'test5',
          url: ''
        },
        {
          id: 'test6',
          url: ''
        },
        {
          id: 'test7',
          url: ''
        },
        {
          id: 'test8',
          url: ''
        },
        {
          id: 'test9',
          url: ''
        },
        {
          id: 'test10',
          url: ''
        }, {
          id: 'test11',
          url: ''
        }, {
          id: 'test12',
          url: ''
        }, {
          id: 'test13',
          url: ''
        }, {
          id: 'test14',
          url: ''
        }, {
          id: 'test15',
          url: ''
        },
        {
          id: 'test16',
          url: ''
        }, {
          id: 'test17',
          url: ''
        }, {
          id: 'test18',
          url: ''
        }, {
          id: 'test19',
          url: ''
        }, {
          id: 'test120',
          url: ''
        }, {
          id: 'test21',
          url: ''
        }, {
          id: 'test22',
          url: ''
        },
        {
          id: 'test23',
          url: ''
        },
        {
          id: 'test24',
          url: ''
        },
      ]
    }
      
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
